<template>
	<view class="index" >
		<view class="content" :class="isShowPopup ? 'popup-show': ''">
			<!-- 背景部分 -->
			<template v-for="(banner,index) in banners">
				<view class="bg pa" v-show="botStatus == index"
					:style="{background:`linear-gradient(to bottom, ${banner.top_background}, ${banner.bottom_background})`}">
				</view>
			</template>
			<view class="search pr" v-for="(banner,index) in banners"
			v-show="botStatus == index"
			:style="{'padding-top':search.isBorder == true ? search_pt : 0,
			background:search.isBorder == true ? `linear-gradient(to bottom, ${banner.top_background}, ${banner.bottom_background})` : '',
			}"
			:class="[search.isBorder== true ? 'sticky':'']">
			    <search :search="search" :isBorder="search.isBorder" ></search>
			</view>
			<view class="main pr tc" :class="{'chageSearch': isSearch}">
				<!-- 轮播图 -->
				<view class="banner">
					<banner-list :banners="banners" background="#FFF" :heightFix="true" @botIndex="botIndex">
					</banner-list>
				</view>
				<!-- 广告位 -->
				<view class="advertising" v-show="false">
					<image :src="advertising"></image>
				</view>
				<!-- grid -->
				<grid :menu="menu"></grid>
				<!-- 公告 -->
				<view class="pr">
					<text-list :banners="notice.data"></text-list>
					<view class="news x-f pa" style="left: 0;top: 0;right: 0; z-index: -1;" @tap.stop="jump(newsUrl)" >
						<image class="news_logo pr" style="z-index: 999!important;" :src="news_logo"></image>
						<!-- <view class="news_title one-t tl">{{notice.data[0].title || '暂无公告'}}</view> -->
					</view>
				</view>
				<!-- 商品信息 -->
				<view class="goods" v-if="boutique">
					<view class="goods-title tl">精选好物</view>
					<goods-list :goods_data="boutique" @getId="getId"></goods-list>
				</view>
				<!-- 新用户福利 -->
				<newPeople v-if="isNewPeople" :newCoupons="newCoupons" @closeBtn="closeNew" @getNow="getNow"></newPeople>
				<!-- 限时特惠 -->
				<limitCard v-if="isLimitA" :LimitACoupons="LimitACoupons" @closeBtn="closeFit" @getNowA="getNowA"></limitCard>
				<!-- 限时福利 -->
				<limitCardB v-if="isFit" :limitFits="limitFits" @closeBtn="closeBtn" @getNow="getNow" @seeMore="seeMore"></limitCardB>
			</view>
			<!-- 返回顶部 -->
			<backtop :show_top="show_top"></backtop>
			<!-- 绑定银行卡 -->
			<tip ref="tipChild"></tip>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import search from './components/search.vue'
	import grid from '../user_index/grid.vue'
	import tip from './components/tip.vue'
	export default {
		components: {
			search,
			grid,
			tip,
		},
		data() {
			return {
				isShowPopup : true, // 是否吸顶
				isFit: false,       // 是否显示限时福利
				isLimitA: false,    // 是否显示限时特惠
				isSearch: false,    // 显示搜索栏
				isNewPeople: false, // 是否显示新用户福利
				scrollTop: 0,       // 重置页面高度为0
				botStatus: 0,       // banner 下标值
				search: { // 搜索组件变量
					logo: this.imgUrl + 'logo.png',
					search: this.imgUrl + 'search.png',
					message: this.imgUrl + 'message.png',
				},
				searchUrl: '/pages/search/index',                // 搜索页面路径
				newsUrl: '/pages/news/index',                   // 公告页面路径
				advertising: this.imgUrl + 'advertising.png',   // 广告图片地址
				news_logo: this.imgUrl + 'news_logo.png',       // 公告页面logo
				show_top: false, // 回到顶部按钮显示
				tip_show: false, // 是否显示提示未绑定
				goodsObj: {      // 请求参数
					page: 1,
					pagesize: 10,
					category_id: 0,
					orderby_type: "number",
					orderby: "desc",
					member_id: 1,
					is_group: 0,
					lat: 24.881627,
					lng: 118.628881,
				},
                search_pt: null,    // 搜索位置大小
			}
		},
		computed: {
			...mapState({
				newCoupons: state => state.init.newfit,             // 新用户福利数据
				LimitACoupons: state => state.init.LimitACoupons,   // 限时特惠数据
				boutique: state => state.init.boutique,             // 精选好物数据
				limitFits: state => state.init.limitFits,           // 限时福利数据
				systemInfo: state => state.init.systemInfo,         // 设备信息
				menuButtonInfo: state => state.init.menuButtonInfo, // 微信胶囊高度
				banners: state => state.init.banners,               // 轮播图
				menu: state => state.init.menu.menu_1,              // 九宫格数据
				hight: state => state.init.scrollTop,               // 滚动高度
                is_newUser: state => state.init.is_newUser,         // 是否为新用户
                islimitFits: state => state.init.islimitFits,		// 限时优惠
                notice: state => state.sellers.notice,              // 公告数据
                menuButtonInfo: state => state.init.menuButtonInfo  // 微信小程序胶囊信息
			})
		},
		watch: {
			// 监听滚动高度
			hight(newVal, oldVal) {
				if(!this.isNewPeople && !this.isFit && !this.isLimitA) {
					if (newVal > 100) {
						this.search.isBorder = true
						this.show_top = true;
					} else {
						this.show_top = false;
						this.search.isBorder = false
					}
				}
			}
		},
		methods: {
			// 查看更多
			seeMore() {
				this.$Router.push({
					path: '/pages/seller/group/index'
				})
			},
			// 立即领取
			getNow(index) {
				this.$api('baseExchangeBankCoupon', {
					coupon_key: this.newCoupons[index].key
				}).then(res => {
					if (res.status) {
						this.$tools.toast('领取优惠券成功')
						this.newCoupons[index].type = 1;
					} else {
						this.$tools.toast('领取优惠券失败')
					}
				})
			},
			getNowA(index) {
				this.$api('baseExchangeBankCoupon', {
					coupon_key: this.LimitACoupons[index].key
				}).then(res => {
					this.$tools.toast('领取优惠券成功');
					this.LimitACoupons[index].type = 1;
				})
			},
			// 关闭新用户福利
			closeNew() {
				this.isNewPeople = false;
				if(this.LimitACoupons.length) {
					this.isLimitA = true
				} else {
					this.closeFit();
				}
			},
			// 关闭限时特惠
			closeFit() {
				this.isLimitA = false;
				if(this.limitFits.length) {
					this.isFit = true
				} 
			},
			// 关闭限时福利
			closeBtn() {
                if (this.islimitFits != 0) return;
                this.$store.dispatch('init/get_islimitFits', 1);
				this.isSearch = true
				this.isFit = false
			},
			// 获取商品id
			getId(e) {
				this.$store.dispatch('goods/get_detail', e)
			},
			// 获取轮播图切换时间
			botIndex(val) {
				this.botStatus = val
			},
			// 路由
			jump(path, params) {
				
				// this.$Router.push({
				// 	path: path,
				// 	params: params
				// })
			},
			//点击事件：
			backtop() {
				// 设置当前距离顶部距离为0, 时间为0.5s；
				uni.pageScrollTo({
					duration: 500, // 毫秒
					scrollTop: 0 // 位置
				});
			},
            // 获取新用户福利
            newUser() {
				if(this.is_newUser !=0) return;
				if(this.newCoupons.length) {
					this.isNewPeople = true
				} else {
					this.closeNew()
				}
				this.$store.dispatch('init/get_is_newUser', 1);
            },
		},
		mounted() {
            this.search_pt = this.menuButtonInfo.top + 'px'
			setTimeout(()=> {
				// 获取新用户福利
				this.newUser();
			},300)
		},
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
	.chageSearch {
		z-index: 2;
	}
</style>
